<template>
  <div class="ub ub-ver bg_f2">
    <div class="ub ub-ver textBox" v-show="showTips">
      <div class="ub">温馨提示：</div>
      <div class="closeTips ub-img" @click="showTips = !showTips"></div>
      <div class="ub">
        请仔细核对您的订单,确认无误后于10分钟内支付，支付后若收到出票成功的短信提示即为订票成功。
      </div>
    </div>
    <div class="ub ub-pc">
      <div class="showcity ub ub-pj">
        <div class="ub mar ub-pc">{{airTicketOrder.passengers.air.beginCityName[0]}}</div>
        <div class="ub poze ub-img"></div>
        <div class="ub mar ub-pc">{{airTicketOrder.passengers.air.endCityName[0]}}</div>
      </div>
    </div>
    <div class="ub pad_05 ub-ver bg_w">
      <div class="ub">
        <div class="ub fc_purple">{{airTicketOrder.passengers.air.flightAirLine + airTicketOrder.passengers.air.flightNum}}</div>
        <div class="ub margin-l05 fc-8b">{{airTicketOrder.passengers.air.beginDate}}</div>
        <div class="ub margin-l05 fc-8b">{{$utils.getWeek(airTicketOrder.passengers.air.beginDate).third}}</div>
      </div>
      <div class="ub mar_t1 mar_b1">
        <div class="ub plane_dan ub-img"></div>
        <div class="ub ub-ver">
          <div class="ub">
            <div class="ub ub-ac">{{airTicketOrder.passengers.air.beginCityName[1]}}</div>
            <div class="ub ub-ac margin-l05" v-if="airTicketOrder">{{airTicketOrder.passengers.air.beginDateTime.substring(0,5)}}</div>
          </div>
          <div class="ub pad_t05">
            <div class="ub ub-ac">{{airTicketOrder.passengers.air.endCityName[1]}}</div>
            <div class="ub ub-ac  margin-l05" v-if="airTicketOrder">{{airTicketOrder.passengers.air.endDateTime.substring(0,5)}}</div>
          </div>
        </div>
      </div>
      <div class="ub ub-ver pad_05 top_line">
        <div class="ub pad_b05">乘机人</div>
        <div class="ub ub-ver fz08">
          <div class="ub ub-ver pad_t05" v-for="(item, index) in airTicketOrder.passengers.passengers">
            <div class="ub">{{item.piName}}</div>
            <div class="ub fc-8b pad_t05">
              <div class="ub">{{item.piNumberType}}</div>
              <div class="ub margin-l05">{{item.piNumber}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ub mar_t1 bg_w ub-ver">
      <div class="ub ub-pj ub-ac wd_100 bs_bb pad_05">
        <div class="ub ub-ac">订单总额</div>
        <div class="ub ub-ac">
          <div class="ub foucus">{{'￥'+((airTicketOrder.passengers.priceCount + airTicketOrder.passengers.zhifuchuli + confirmOrder.showDetails.bagSum + confirmOrder.showDetails.mealSum)||0)}}</div>
          <div class="ub-img margin-l05" :class="{'arrow_up':showDetail,'arrow_down':!showDetail}" @click="showDetail = !showDetail"></div>
        </div>
      </div>
      <div class="ub ub-ver wd_100 bs_bb pad_05" v-show="showDetail">
        <div class="ub ub-ac ub-pj pad_b1">
          <div class="ub ub-ac">去程：</div>
          <div class="ub ub-ac">
            <div class="ub ub-ac">小计：</div>
            <div class="ub ub-ac foucus">{{'￥'+((airTicketOrder.passengers.priceCount + airTicketOrder.passengers.zhifuchuli + confirmOrder.showDetails.bagSum + confirmOrder.showDetails.mealSum)||0)}}</div>
          </div>
        </div>
        <div class="ub ub-ac ub-pj pad_b1">
          <div class="ub ub-ac wd_30">成人票</div>
          <div class="ub ub-ac ub-pc">{{'×' + (airTicketOrder.passengers.adtNum || 0)}}</div>
          <div class="ub ub-ac wd_30 ub-pe">{{'￥' + (airTicketOrder.passengers.adtpri || 0)}}</div>
        </div>
         <div class="ub ub-ac ub-pj pad_b1">
          <div class="ub ub-ac wd_30">{{fyName}}</div>
          <div class="ub ub-ac ub-pc">{{'×' + (airTicketOrder.passengers.adtNum || 0)}}</div>
          <div class="ub ub-ac wd_30 ub-pe">{{'￥'+airTicketOrder.passengers.jijian || 0}}</div>
        </div>
        <div class="ub ub-ac ub-pj pad_b1" v-show="airTicketOrder.passengers.cnnNum != 0">
          <div class="ub ub-ac wd_30">儿童</div>
          <div class="ub ub-ac ub-pc">{{'×' + (airTicketOrder.passengers.cnnNum || 0)}}</div>
          <div class="ub ub-ac wd_30 ub-pe">{{'￥' + (airTicketOrder.passengers.cnnpri || 0)}}</div>
        </div>
         <div class="ub ub-ac ub-pj pad_b1" v-show="airTicketOrder.passengers.jijianranyou_ertong!==0">
          <div class="ub ub-ac wd_30">{{fyName}}</div>
          <div class="ub ub-ac ub-pc">{{'×' + (airTicketOrder.passengers.cnnNum || 0)}}</div>
          <div class="ub ub-ac wd_30 ub-pe">{{'￥'+airTicketOrder.passengers.jijianranyou_ertong || 0}}</div>
        </div>
        <div class="ub ub-ac ub-pj pad_b1" v-show="airTicketOrder.passengers.infNum != 0">
          <div class="ub ub-ac wd_30">婴儿</div>
          <div class="ub ub-ac ub-pc">{{'×' + (airTicketOrder.passengers.infNum || 0)}}</div>
          <div class="ub ub-ac wd_30 ub-pe">{{'￥' + (airTicketOrder.passengers.infpri || 0)}}</div>
        </div>
       
       
        <div class="ub ub-ac ub-pj pad_b1" v-show="airTicketOrder.passengers.zhifuchuli!==0">
          <div class="ub ub-ac wd_30">交易处理费</div>
          <div class="ub ub-ac"></div>
          <div class="ub ub-ac wd_30 ub-pe">{{'￥' + (airTicketOrder.passengers.zhifuchuli || 0)}}</div>
        </div>
        <div class="ub ub-ac ub-pj pad_b1" v-show="confirmOrder.showDetails.bagSum">
          <div class="ub ub-ac wd_30">逾重行李</div>
          <div class="ub ub-ac ub-pc">{{(confirmOrder.showDetails.bagKg || 0)+'公斤'}}</div>
          <div class="ub ub-ac wd_30 ub-pe">{{'￥' + (confirmOrder.showDetails.bagSum || 0)}}</div>
        </div>
        <div class="ub ub-ac ub-pj pad_b1" v-show="confirmOrder.showDetails.mealSum">
          <div class="ub ub-ac wd_30">机上餐食</div>
          <div class="ub ub-ac ub-pc">{{(confirmOrder.showDetails.mealTime || 0) + '份'}}</div>
          <div class="ub ub-ac wd_30 ub-pe">{{'￥' + (confirmOrder.showDetails.mealSum || 0)}}</div>
        </div>
      </div>
    </div>
    <div class="ub zanwei bg_w"></div>
    <div class="footer">
      <div class="ub">
        <div class="ub ub-ac ub-pc back" @click="$router.go(-1)">返回修改</div>
        <div class="ub ub-ac ub-pc commitnm" @click="commit">确认订单</div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
export default {
  created: function () {
    this.$store.commit('changeHeader', { // 提交首页header
      left: '返回',
      right: '',
      middle: '确认订单',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
    this.fyName = this.ishome.data ? '税费+燃油' : '税费+燃油'
  },
  data: function () {
    return {
      showTips: true,
      showDetail: true,
      fyName: ''
    }
  },
  components: {
  },
  computed: mapState(['ishome', 'loginData', 'confirmOrder', 'airTicketOrder', 'flights', 'orderPayment']),
  methods: {
    commit: function () {
      let airTicketOrder = this.airTicketOrder.passengers
      let passengers = airTicketOrder.passengers;
      let traveler = [];
      passengers.forEach(function (item, index) {
        traveler.push(item.piId + '')
      });
      let userInfo = this.loginData.userInfo;
      let userId = userInfo.userId + '';
      let loginToken = userInfo.token.loginToken;
      let content = {
        auxiliaryback: [],
        airCompanyId: this.flights.searchOpt.tic.airCompanyId,
        traveler: traveler,
        IsMailTrip: airTicketOrder.air.uri,
        userLinkMan: airTicketOrder.userLinkMan,
        userLinkEmail: airTicketOrder.userLinkEmail || '',
        auxiliarygo: this.confirmOrder.auxiliarygo,
        appFrom: 'westAirH5',
        userId: userId,
        tripOptionId: airTicketOrder.air.uri,
        userLinkPhone: airTicketOrder.userMobile,
        customer: userId
      }
      let data = this.$utils.getUserContent(content, true);
      data.headers.userId = userId;
      data.headers.loginToken = loginToken;
      let self = this;
      this.$utils.ajax(data, 'creatOrder', self, function (data) {
        console.log('success');
        console.log(data); // 响应成功回调
        self.$store.commit('closePop');
        if (data.code === 1000) {
          console.log(data.content);
          self.$store.commit('setOrderPayment', data.content)
          self.$router.push('/orderPayment')
        } else {
          self.$store.dispatch('showTx', { data: data.message || '网络错误，请重试' });
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped >
@import '../../stylus/base.styl';
.arrow_up
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('arrow_up@2x.png');
.arrow_down
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('arrow_down@2x.png');
.textBox
  box-sizing: border-box;
  padding: f_times(0.5) f_times(1);
  font-size: f_times(0.8);
  line-height: f_times(1.2);
  color: #854A95;
  background-color: #EEDAF5;
  position: relative;
.closeTips
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('close_tips.png');
  position: absolute;
  top: f_times(0.2);
  right: f_times(1);
.poze
  width: 20%;
  padding-bottom: 4.8428571428%;
  background-image: url('fly_wf_white_dan@2x.png');
.plane_dan
  width: f_times(1.5);
  background-image: url('plane_line_dan.png');
.showcity
  width: 90%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #843D99;
  color: #fff;
  padding: f_times(0.6);
  margin-top: f_times(0.3);
  .mar
    width: 30%;
    // margin-bottom: f_times(0.5)
.top_line
  border-top: 1px solid #f2f2f2;
.foucus
  color: #FFA314;
.zanwei
  padding-bottom: f_times(3);
.footer
  width: 100%;
  height: f_times(3);
  position: fixed;
  left: 0;
  bottom: 0;
  >div
    width: 100%;
    height: f_times(3);
    >div
      width: 50%;
    .back
      background-color: #fff;
    .commitnm
      background-color: #843D99;
      color: #fff;
.wd_30
  width: 30%;
</style>